<template>
  <div class="home">
    <!-- 轮播图 -->
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide>
        <img class="w-100" src="@/assets/banner/banner (1).jpeg" alt />
      </swiper-slide>
      <swiper-slide>
        <img class="w-100" src="@/assets/banner/banner (2).jpeg" alt />
      </swiper-slide>
      <swiper-slide>
        <img class="w-100" src="@/assets/banner/banner (3).jpeg" alt />
      </swiper-slide>
      <!-- Optional controls -->
      <div
        class="swiper-pagination pagination-home text-right pr-3 pb-2"
        slot="pagination"
      ></div>
    </swiper>
    <!-- end of swiper -->
    <!-- 九宫格 -->
    <div class="nav-icons bg-white mt-2 text-center pt-3 text-grey">
      <!-- 入口图标 -->
      <div
        class="d-flex flex-wrap"
        :class="[isOpen ? '' : 'hidden-height']"
      >
        <a
          class="nav-item mb-3"
          :href="item.url"
          v-for="item in spriteData"
          :key="item.url"
        >
          <i class="sprite my-1" :style="item.position"></i>
          <div>{{ item.text }}</div>
        </a>
      </div>
      <!-- 展开收起 -->
      <div
        class="nav-spread bg-light py-2 fs-sm text-center text-grey"
        @click="isOpen = !isOpen"
      >
        <i
          class="sprite mr-1"
          :class="[isOpen ? 'sprite-arrow' : 'sprite-arrow-transform']"
        ></i>
        <span>{{ isOpen ? "收起" : "展开" }}</span>
      </div>
    </div>
    <!-- end of nav-icons -->
    <!-- 新闻列表卡片 -->
    <list-card icon="cc-menu-circle" title="新闻资讯" :categories="newsCats">
      <!-- 作用域插槽 -->
      <template v-slot:items="{ category }">
        <ul class="mt-1">
          <li v-for="(news, i) in category.newsList" :key="i">
            <a href="javascript:;" class="d-flex pb-3">
              <span class="new-category fs-xs text-primary">{{
                news.ListName
              }}</span>
              <span class="title fs-lg text-dark px-2 flex-1">{{
                news.title
              }}</span>
              <span class="time text-gery">{{ news.date | date }}</span>
            </a>
          </li>
        </ul>
      </template>
    </list-card>
    <!-- 新闻列表卡片 end -->
    <m-card icon="big-hero" title="英雄列表" class="hero"></m-card>
    <m-card icon="video" title="精彩视频" class="hero"></m-card>
  </div>
</template>

<script>
import dayjs from 'dayjs'
// import _variables from '../assets/scss/_variables.scss'

export default {
  name: 'home',
  data () {
    return {
      // swiper配置
      swiperOption: {
        pagination: {
          el: '.pagination-home',
          clickable: true
        },
        autoplay: {
          disableOnInteraction: false, // 用户操作后是否禁止自动循环
          delay: 3000 // 自动循环时间
        },
        speed: 1000,
        loop: true
      },
      // 新闻列表
      newsCats: [
        {
          name: '热门',
          newsList: new Array(5).fill({}).map(v => ({
            ListName: '新闻',
            title: '“我的英雄”界面BUG修复&天鹅之梦头像框抢先看【老亚瑟的答疑时间】',
            date: '10/20'
          }))
        },
        {
          name: '新闻',
          newsList: new Array(5).fill({}).map(v => ({
            ListName: '新闻',
            title: '“我的英雄”界面BUG修复&天鹅之梦头像框抢先看【老亚瑟的答疑时间】',
            date: '10/20'
          }))
        },
        {
          name: '公告',
          newsList: new Array(5).fill({}).map(v => ({
            ListName: '公告',
            title: '“我的英雄”界面BUG修复&天鹅之梦头像框抢先看【老亚瑟的答疑时间】',
            date: '10/20'
          }))
        },
        {
          name: '活动',
          newsList: new Array(5).fill({}).map(v => ({
            ListName: '活动',
            title: '“我的英雄”界面BUG修复&天鹅之梦头像框抢先看【老亚瑟的答疑时间】',
            date: '10/20'
          }))
        },
        {
          name: '赛事',
          newsList: new Array(5).fill({}).map(v => ({
            ListName: '赛事',
            title: '“我的英雄”界面BUG修复&天鹅之梦头像框抢先看【老亚瑟的答疑时间】',
            date: '10/20'
          }))
        }
      ],
      // 九宫格图片
      spriteData: [
        {
          text: '爆料站',
          position: {
            'background-position': ' 63.546% 15.517%'
          },
          url: 'https://pvp.qq.com/m/m201706/coming/index.htm'
        },
        {
          text: '故事站',
          position: {
            'background-position': ' 90.483% 15.614%'
          },
          url: 'https://pvp.qq.com/act/a20160510story/index.htm?ADTAG=PC.QrCode.TG'
        },
        {
          text: '周边商城',
          position: {
            'width': '1.4615rem',
            'height': '1.6923rem',
            'background-position': '36.746% 0.924%'
          },
          url: 'https://pvp.qq.com/mall/m'
        },
        {
          text: '体验服',
          position: {
            'width': '1.5385rem',
            'height': '1.5385rem',
            'background-position': '10.408% 15.517%'
          },
          url: 'https://pvp.qq.com/cp/a20161116tyf/page01.htm'
        },
        {
          text: '新人专区',
          position: {
            'width': '1.5385rem',
            'height': '1.6154rem',
            'background-position': '89.733% 1.266%'
          },
          url: 'https://pvp.qq.com/m/m201606/goCenter.shtml'
        },
        {
          text: '荣耀传承',
          position: {
            'background-position': '36.467% 15.287%'
          },
          url: 'https://pvp.qq.com/m/memory/index.shtml'
        },
        {
          text: '王者营地',
          position: {
            'width': '1.8462rem',
            'height': '1.8462rem',
            'background-position': '63.3% 0.927%'
          },
          url: 'https://image.ttwz.qq.com/wzry/wzryzs_download_4001.htm?ADTAG=mpvp.qq.com'
        },
        {
          text: '公众号',
          position: {
            'background-position': '0 96.207%'
          },
          url: 'https://game.weixin.qq.com/cgi-bin/comm/openlink?noticeid=90102708&appid=wx95a3a4d7c627e07d&url=https%3A%2F%2Fgame.weixin.qq.com%2Fcgi-bin%2Fh5%2Fstatic%2Fsubscribe%2Findex.html%3Fappid%3Dwx95a3a4d7c627e07d#wechat_redirect'
        },
        {
          text: '模拟战资料库',
          position: {
            'width': '2.3846rem',
            'height': '1.9231rem',
            'background-position': '9.302% 0.813%'
          },
          url: 'https://pvp.qq.com/m/wzmnzm/index.html'
        },
        {
          text: '版本介绍',
          position: {
            'background-position': '90.483% 15.614%'
          },
          url: 'https://pvp.qq.com/cp/a20190320bbgxsmm/index.html'
        }
      ],
      // 是否展开
      isOpen: true
    }
  },
  created () {
  },
  mounted () {
    // console.log(this.$refs.span.slice(5))
  },
  component: {

  },
  filters: {
    date (val) {
      return dayjs(val).format('MM/DD')
    }
  }
}
</script>

<style lang='scss'>
@import "~@/assets/scss/variables";
.pagination-home {
  .swiper-pagination-bullet {
    opacity: 1;
    background-color: map-get($colors, "white");
    border-radius: 0.1538rem;
  }
  .swiper-pagination-bullet-active {
    background-color: map-get($colors, "info");
  }
}

.nav-icons {
  border-bottom: 1px solid $border-color;
  // 隐藏的高度
  .hidden-height {
    height: 4.2308rem;
    overflow: hidden;
  }
  .nav-item {
    i {
      width: 1.7692rem;
      height: 1.5385rem;
    }
    width: 25%;
    border-right: 1px solid $border-color;
    &:nth-child(4n) {
      border-right: none;
    }
  }
  .nav-spread {
    .sprite-arrow {
      width: 0.7692rem;
      height: 0.7692rem;
      background-position: 38.577% 52.076%;
    }
    .sprite-arrow-transform {
      @extend .sprite-arrow;
      transform: rotate(180deg);
    }
  }
}

.new-category {
  padding: 0.0769rem 0.1538rem;
  border: 1px solid;
  border-radius: 0.2308rem;
  // color: nth($colors, $i);
}
.title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
</style>
